<template>
  <div>
    <Header activeClass="1" @findService="getfindService"  @apisum="getapisum" :asfdl="sfdl" :auname="uname"></Header>
 

      <div class="clearfix"></div>


    <Footer :khxs="khxs"></Footer>
  </div>
</template>
  
<script>
import Header from "../common/Header";
import Footer from "../common/Footer";
import qs from 'qs';
import axios from 'axios';

export default {
  name: "Index",
  components: { Header, Footer},
  data() {
    return {
      khxs:false,
      cont: false,
      sq: false,
      changeRed:-1,
      apisum:0,
      categories: [],
      findService:[],
      serviceDetail:"",
      changeshowAPIList:0,
      showAPI:[],
      showAPIJSON:"",
      searchon:true,
      selectStatus:'',
      sqyear:3,
      projectName:"",
      projectManager:"",
      client:"",
      sqcg:false,
      formmsg:"",
      radioTreaty: '0',
      sfdl:false,
      uname:"个人中心"
    };
  },
// http://localhost:8081/#/?apiid=5ed0cb22c98e372884e133f9
  mounted: function() {
     var _this = this;
       //获取客户端ip 

    console.log("aaaa",_this.$route.query.id);
    if(_this.$route.query.id){
     _this.postbox(_this.$route.query.id);
    }else{

      var cc = localStorage.getItem("search_ip");
      console.log("search_ip",cc);
      if(cc == null){
        _this.initNav();
      }
      else{

        
                _this.$http({
                  url: "index/search?key=" + cc,
                  method: "get"
                }).then(res => {
                  console.log(res.data);


                  _this.findService = res.data.datas;
                _this.apisum = res.data.datas.length;
                _this.apisum == 0?_this.searchon=false:_this.searchon=true;


                  document.querySelector("#apilbox2").scrollIntoView(true)
                  localStorage.removeItem("search_ip");

                });
   

      }
      
      

    }
    




  },



  methods: {

    agreeChange:function(val){
          let that = this 

          console.log(val);
          that.radioTreaty = val
          
        },

  // 申请
  sqapi(id,name){
     let _this = this;
     console.log(id,name,_this.projectName,_this.projectManager,_this.client,_this.radioTreaty,_this.sqyear);
     if(id&&name&&_this.projectName&&_this.projectManager&&_this.client&&_this.radioTreaty&&_this.sqyear){

        let stype = "";
        _this.radioTreaty == 1 ? stype="test" : stype="buss";
        
        console.log(id,name,_this.projectName,_this.projectManager,_this.client,stype,_this.sqyear);

        var utoken = localStorage.getItem("USER_TOKEN");
        var data = {
          "serviceSn":id,
          "serviceName":name,
          "projectName":_this.projectName,
          "projectManager":_this.projectManager,
          "client":_this.client,
          "type":stype,
          "year":`${_this.sqyear}`,
        }

      console.log(utoken);
      utoken = utoken.replace('"', ''); 
      utoken = utoken.replace('"', ''); 
      console.log(utoken);





      this.$http({
        url: `check/add`,
        method: 'post',
        headers: {
          
          "Authentication":utoken,
          'Content-Type': 'application/x-www-form-urlencoded'
          
          },
        data: qs.stringify(data)
      }).then(res => {
        console.log(res);

        _this.sqcg = true;

      }).catch(function (error) {
       
        console.log("aaa:",error);
        if(error == "Error: Request failed with status code 401"){
         _this.formmsg = "您的账号在其他设备登录账号信息已过期请重新登录";
        //  localStorage.removeItem("USER_TOKEN");
        //  _this.sfdl = false;
         console.log(2222);
        }
    });

     }else{
       this.formmsg = "请全部填写完整后提交";
     }
     
  },


  getfindService(title){
  this.findService=title;
  },

  getapisum(title){
    console.log(12321321321312);
    
    this.cont=false;
    this.apisum=title;
    title == 0?this.searchon=false:this.searchon=true;
  },

    showsq: function(id) {
      console.log("apiid:",id);

      var utoken = localStorage.getItem("USER_TOKEN");
      console.log("token",utoken);


      utoken = utoken.replace('"', ''); 
      utoken = utoken.replace('"', ''); 
      console.log(utoken);
      
      if(utoken != null){


        this.$http.get(`index/validToken?token=${utoken}`).then(res => {
          console.log("index/validToken?token=:",res);
          if(res.data){
            this.sq = true;
          }else{
            var ta = window.location.href+"?id="+id;
            localStorage.setItem("preurl",ta);
            window.location.href ="https://dainfo.hsaeyz.cn:9046/data-center/#/login?url="+ta;
          }
          
          
        });

        
      }else{
        
        var ta = window.location.href+"?id="+id;
        localStorage.setItem("preurl",ta);
        window.location.href ="https://dainfo.hsaeyz.cn:9046/data-center/#/login?url="+ta;
        
      }

    },

    gbsq: function() {
      this.sq = false;
    },

    //登录返回后显示
    postbox(id){
      this.khxs = false;
      console.log("23423423432",this.khxs);
      
      this.showCont(id);
    },

    // 获取分类
    initNav() {
      let _this = this;
      this.$http.get("index/findCategory").then(res => {
        console.log("categories:",res.data.datas);
        _this.categories = res.data.datas;
      });
      this.list(-1);
    },

    // 选择分类
    showList:function(id){
      this.changeRed = id;
      this.cont = false;
     
      this.list(id);
    },


    // 获取列表
    list(id) {
      let _this = this;
      this.$http({
        url: 'index/findService?categoryId='+id,
        method: 'get'
      }).then(res => {
        console.log(res.data);
        _this.findService = res.data.datas;
        _this.apisum = res.data.datas.length;
        _this.apisum == 0?_this.searchon=false:_this.searchon=true;
      })
    },

    // 显示详情
    showCont: function(id) {
         this.khxs = false;
      console.log("23423423432",this.khxs);
      let _this = this;
      this.$http({
        url: 'index/serviceDetail?serviceId='+id,
        method: 'get'
      }).then(res => {
        let serviceDetail = res.data.datas;
        console.log(res.data);
        _this.serviceDetail = serviceDetail;
        _this.cont = true;
        _this.showAPI = _this.serviceDetail.serviceApis[0];
        
        
        _this.showAPIJSON = JSON.parse(_this.showAPI.returnExample)
        console.log(_this.showAPIJSON);
      })
    },

    // 选择API
    showAPIList:function(index){
      this.changeshowAPIList = index;
      this.showAPI = this.serviceDetail.serviceApis[index];
      this.showAPIJSON = JSON.parse(this.showAPI.returnExample);
    },

  }
};
</script>
<style lang="less" scoped>
.sq_box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.labelRight {
  display: inline-block;
  margin: 0 0 0 10px;
}
.userLabelRadio {
  margin-right: 10px;
}
#addapi .inputDiv .label_number {
  width: 220px;
}
.label_number_text {
  margin-left: 10px;
}
.label_test_text {
  color: #fe514a;
  font-size: 14px;

}
.label_commercial {
  position: relative;
}
.label_commercial em {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 180px;
  height: 38px;
  padding: 0 10px;
  background: #ffffff;
  color: rgb(102, 102, 102);
  font-style: normal;
  line-height: 40px;
}
</style>